<template>
	<view class="box">
		<view class="address_info">
			<view class="info_item name">
				<view class="text">真实姓名</view>
				<view class="input">
					<input type="text" placeholder="真实姓名" v-model="userInfo.name">
				</view>
			</view>
			<view class="info_item tel">
				<view class="text">联系电话</view>
				<view class="input">
					<input type="number" placeholder="联系电话" maxlength="11" v-model="userInfo.mobile">
				</view>
			</view>
			<view class="info_item tel">
				<view class="text">所在地区</view>
				<view class="input">
					<input placeholder="省、市、区、街道" v-model="userInfo.data7" @focus="data7Focus"></input>
				</view>
			</view>
			<view class=" address_detail">
				<view class="text">详细地址</view>
				<view class="textarea">
					<textarea cols="30" rows="10" placeholder="详细地址" v-model="userInfo.address"></textarea>
				</view>
			</view>
		</view>
		<!-- 保存按钮 -->
		<view class="save_btn">
			<button @click="submitForm">提交申请</button>
		</view>
		<u-picker :show="show" :columns="columns" keyName="name" @confirm="confirm" @change="changeHandler"
			:loading="loadingPicker" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '', //真实姓名
					mobile: '', //电话
					address: '', //详细地址,
					data7: "",
					provinceId: "",
					cityId: "",
					areaId: "",
				},
				loadingPicker: false,
				show: false,
				columns: [
					[],
					[],
					[]
				],
				errors: {}
			};
		},
		methods: {
			validateForm() {
				this.errors = {}; // 重置错误信息
				// 验证姓名
				if (!this.userInfo.name) {
					this.errors.name = '请填写真实姓名';
				}
				// 验证电话
				if (!this.userInfo.mobile) {
					this.errors.mobile = '请填写联系电话';
				} else if (!/^\d{11}$/.test(this.userInfo.mobile)) {
					this.errors.mobile = '联系电话格式不正确';

				}
				// 验证地址
				if (!this.userInfo.address) {
					this.errors.address = '请填写详细地址';
				}
				// 验证地区
				if (!this.userInfo.data7) {
					this.errors.data7 = '请选择所在地区';
				}
				return Object.keys(this.errors).length === 0;
			},
			showValidationError(message) {
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 2000
				});
			},
			submitForm() {
				if (this.validateForm()) {
					console.log('表单验证通过，提交数据:', this.userInfo);
					this.$request.get("/water-platform-app-api/customer/agency/join",this.userInfo).then(res =>{
						if(res.code == 0){
							uni.showToast({
								title: "提交成功",
								icon: 'none',
								duration: 2000
							});
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
					})
					
				} else {
					console.log('表单验证失败', this.errors);
					for (const key in this.errors) {
						if (this.errors.hasOwnProperty(key)) {
							this.showValidationError(this.errors[key]);
							break; 
						}
					}
				}
			},
			changeHandler(e) {
				console.log('e::: ', e);
				const {
					columnIndex,
					value,
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				this.regionList(this.columns, columnIndex + 1, {
					level: value[columnIndex].level + 1,
					parentId: value[columnIndex].id
				})
			},
			cancel() {
				this.show = false
			},
			data7Focus() {
				this.show = true;
				this.regionList(this.columns, 0)
			},
			regionList(arr, key, data = {
				level: 1,
				parentId: 0
			}) {
				const {
					parentId,
					level
				} = data
				if (level == 4) return
				this.$request.get("/customer/address/regionList", data, ).then(res => {
					if (res.code == 0) {
						console.log(res);
						this.$set(arr, key, res.data)
						this.regionList(arr, key + 1, {
							level: level + 1,
							parentId: res.data[0].id
						})
					}
				})
			},
			// 回调参数为包含columnIndex、value、values
			confirm({
				value
			}) {
				console.log('value::: ', value);
				let str = ""
				value.forEach((item, index) => {
					if (str.length > 0) {
						str += '-';
					}
					str += item.name
					if (index == 0) {
						this.$set(this.userInfo, 'provinceId', item.id)
					} else if (index == 1) {
						this.$set(this.userInfo, 'cityId', item.id)
					} else if (index == 2) {
						this.$set(this.userInfo, 'areaId', item.id)
					}

				})
				this.userInfo.data7 = str
				this.show = false
			},
		}
	}
</script>

<style lang="scss">
	.box {
		height: 100vh;
		background-color: #f6f6f6;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.error-message {
		color: red;
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	.address_info {
		width: 100%;
		// height: 512rpx;
		border-radius: 16rpx;
		padding: 32rpx 32rpx 18rpx 32rpx;
		box-sizing: border-box;
		background-color: #fff;

		.info_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #2E3033;
			font-family: PingFangSC-Regular, PingFang SC;
			margin-bottom: 32rpx;

			.input {
				width: 494rpx;
				height: 72rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				padding: 16rpx 32rpx;
				box-sizing: border-box;

				::v-deep uni-input {
					width: 100%;
					height: 100%;
					font-size: 28rpx;
					font-family: PingFang-SC-Regular, PingFang-SC;
					font-weight: 400;
					color: #000000;
				}

				::v-deep .uni-input-placeholder {
					font-size: 28rpx;
					font-family: PingFang-SC-Regular, PingFang-SC;
					font-weight: 400;
					color: #949494;
				}
			}
		}

		.address {
			position: relative;

			::v-deep .input-value-border {
				height: 72rpx;
				margin-left: 16rpx;
				border: none;
				background-color: #F6F6F6;
				border-radius: 16rpx;

			}

			::v-deep .selected-area {
				padding-left: 16rpx;
			}

			::v-deep .placeholder {

				font-size: 28rpx;
				font-family: PingFang-SC-Regular, PingFang-SC;
				font-weight: 400;
				color: #949494;
			}

			.location {
				width: 22rpx;
				height: 26rpx;
				position: absolute;
				top: 18rpx;
				right: 32rpx;
			}
		}

		.address_detail {
			.text {
				font-size: 28rpx;
				color: #2E3033;
			}

			.textarea {
				width: 494rpx;
				height: 150rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				padding: 16rpx 32rpx;
				box-sizing: border-box;
				margin-left: auto;
				margin-top: 16rpx;
			}

			textarea {
				width: 100%;
				height: 100%;
			}

			::v-deep .uni-textarea-placeholder {
				font-size: 28rpx;
				font-family: PingFang-SC-Regular, PingFang-SC;
				font-weight: 400;
				color: #949494;
			}
		}
	}

	.save_btn {
		width: 622rpx;
		height: 88rpx;
		position: fixed;
		bottom: 98rpx;
		margin-left: 32rpx;

		button {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			background: #2590FA;
			border-radius: 25px;
		}
	}
</style>